<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>用途 | Study Road</title>
    <meta name="description" content="records of my study">
    <meta name="generator" content="VitePress v1.1.4">
    <link rel="preload stylesheet" href="/MyBlog/assets/style.CvobiJmi.css" as="style">
    
    <script type="module" src="/MyBlog/assets/app.-v4H7ZoB.js"></script>
    <link rel="preload" href="/MyBlog/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/MyBlog/assets/chunks/theme.WOkz4S_1.js">
    <link rel="modulepreload" href="/MyBlog/assets/chunks/framework.Y1M58v7X.js">
    <link rel="modulepreload" href="/MyBlog/assets/VitePress.md.wP93Pe9t.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-a9a9e638><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c3508ec8></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c3508ec8> Skip to content </a><!--]--><!----><header class="VPNav" data-v-a9a9e638 data-v-f1e365da><div class="VPNavBar has-sidebar top" data-v-f1e365da data-v-40788ea0><div class="wrapper" data-v-40788ea0><div class="container" data-v-40788ea0><div class="title" data-v-40788ea0><div class="VPNavBarTitle has-sidebar" data-v-40788ea0 data-v-28a961f9><a class="title" href="/MyBlog/" data-v-28a961f9><!--[--><!--]--><!----><span data-v-28a961f9>Study Road</span><!--[--><!--]--></a></div></div><div class="content" data-v-40788ea0><div class="content-body" data-v-40788ea0><!--[--><!--]--><div class="VPNavBarSearch search" data-v-40788ea0><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-40788ea0 data-v-492ea56d><span id="main-nav-aria-label" class="visually-hidden" data-v-492ea56d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/MyBlog/" tabindex="0" data-v-492ea56d data-v-ed5ac1f6><!--[--><span data-v-ed5ac1f6>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/MyBlog/markdown-examples" tabindex="0" data-v-492ea56d data-v-ed5ac1f6><!--[--><span data-v-ed5ac1f6>Examples</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-40788ea0 data-v-ead91a81><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-ead91a81 data-v-b79b56d4 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-b79b56d4></span><span class="vpi-moon moon" data-v-b79b56d4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-40788ea0 data-v-164c457f data-v-ee7a9424><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-ee7a9424 data-v-717b8b75><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-40788ea0 data-v-9b536d0b data-v-e5380155><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-e5380155><span class="vpi-more-horizontal icon" data-v-e5380155></span></button><div class="menu" data-v-e5380155><div class="VPMenu" data-v-e5380155 data-v-97491713><!----><!--[--><!--[--><!----><div class="group" data-v-9b536d0b><div class="item appearance" data-v-9b536d0b><p class="label" data-v-9b536d0b>Appearance</p><div class="appearance-action" data-v-9b536d0b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-9b536d0b data-v-b79b56d4 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-b79b56d4></span><span class="vpi-moon moon" data-v-b79b56d4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-9b536d0b><div class="item social-links" data-v-9b536d0b><div class="VPSocialLinks social-links-list" data-v-9b536d0b data-v-ee7a9424><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-ee7a9424 data-v-717b8b75><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-40788ea0 data-v-5dea55bf><span class="container" data-v-5dea55bf><span class="top" data-v-5dea55bf></span><span class="middle" data-v-5dea55bf></span><span class="bottom" data-v-5dea55bf></span></span></button></div></div></div></div><div class="divider" data-v-40788ea0><div class="divider-line" data-v-40788ea0></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-a9a9e638 data-v-070ab83d><div class="container" data-v-070ab83d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-070ab83d><span class="vpi-align-left menu-icon" data-v-070ab83d></span><span class="menu-text" data-v-070ab83d>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-070ab83d data-v-bc9dc845><button data-v-bc9dc845>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-a9a9e638 data-v-ec846e01><div class="curtain" data-v-ec846e01></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-ec846e01><span class="visually-hidden" id="sidebar-aria-label" data-v-ec846e01> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-ec846e01><section class="VPSidebarItem level-0 has-active" data-v-ec846e01 data-v-2ea20db7><div class="item" role="button" tabindex="0" data-v-2ea20db7><div class="indicator" data-v-2ea20db7></div><h2 class="text" data-v-2ea20db7>Examples</h2><!----></div><div class="items" data-v-2ea20db7><!--[--><div class="VPSidebarItem level-1 is-link" data-v-2ea20db7 data-v-2ea20db7><div class="item" data-v-2ea20db7><div class="indicator" data-v-2ea20db7></div><a class="VPLink link link" href="/MyBlog/markdown-examples" data-v-2ea20db7><!--[--><p class="text" data-v-2ea20db7>Markdown Examples</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2ea20db7 data-v-2ea20db7><div class="item" data-v-2ea20db7><div class="indicator" data-v-2ea20db7></div><a class="VPLink link link" href="/MyBlog/api-examples" data-v-2ea20db7><!--[--><p class="text" data-v-2ea20db7>Runtime API Examples</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2ea20db7 data-v-2ea20db7><div class="item" data-v-2ea20db7><div class="indicator" data-v-2ea20db7></div><a class="VPLink link link" href="/MyBlog/VitePress" data-v-2ea20db7><!--[--><p class="text" data-v-2ea20db7>VitePress</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-a9a9e638 data-v-91765379><div class="VPDoc has-sidebar has-aside" data-v-91765379 data-v-83890dd9><!--[--><!--]--><div class="container" data-v-83890dd9><div class="aside" data-v-83890dd9><div class="aside-curtain" data-v-83890dd9></div><div class="aside-container" data-v-83890dd9><div class="aside-content" data-v-83890dd9><div class="VPDocAside" data-v-83890dd9 data-v-6d7b3c46><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" role="navigation" data-v-6d7b3c46 data-v-b6ca177b><div class="content" data-v-b6ca177b><div class="outline-marker" data-v-b6ca177b></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-b6ca177b>On this page</div><ul class="VPDocOutlineItem root" data-v-b6ca177b data-v-3f927ebe><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-6d7b3c46></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-83890dd9><div class="content-container" data-v-83890dd9><!--[--><!--]--><main class="main" data-v-83890dd9><div style="position:relative;" class="vp-doc _MyBlog_VitePress" data-v-83890dd9><div><p>2024.5.4</p><h1 id="用途" tabindex="-1">用途 <a class="header-anchor" href="#用途" aria-label="Permalink to &quot;用途&quot;">​</a></h1><p>个人博客搭建，通过github展示</p><h1 id="开发" tabindex="-1">开发 <a class="header-anchor" href="#开发" aria-label="Permalink to &quot;开发&quot;">​</a></h1><h4 id="安装配置" tabindex="-1">安装配置 <a class="header-anchor" href="#安装配置" aria-label="Permalink to &quot;安装配置&quot;">​</a></h4><p>按照官网进行</p><h4 id="项目结构" tabindex="-1">项目结构 <a class="header-anchor" href="#项目结构" aria-label="Permalink to &quot;项目结构&quot;">​</a></h4><p><code>docs</code> 目录作为 VitePress 站点的项目<strong>根目录</strong>；</p><p>配置文件 (<code>.vitepress/config.js</code>) 能够自定义 VitePress 站点的各个方面;</p><p>其余每个 <code>.md</code> 文件将在相同的路径被编译成为 <code>.html</code> 文件</p><h4 id="路由" tabindex="-1">路由 <a class="header-anchor" href="#路由" aria-label="Permalink to &quot;路由&quot;">​</a></h4><p><strong>基于文件的路由</strong>：生成的 HTML 页面是从源 Markdown 文件的目录结构映射而来的</p><h6 id="更换文档目录" tabindex="-1">更换文档目录 <a class="header-anchor" href="#更换文档目录" aria-label="Permalink to &quot;更换文档目录&quot;">​</a></h6><p>由于默认文档直接放在根目录下，比较杂乱，所以创建新的src文件夹，所有的文档将放在src文件夹下，更改配置：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span> srcDir: &#39;./src&#39;</span></span></code></pre></div><h6 id="链接页面" tabindex="-1">链接页面 <a class="header-anchor" href="#链接页面" aria-label="Permalink to &quot;链接页面&quot;">​</a></h6><p>链接到其他文档：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>[displayed text](target doc path)</span></span></code></pre></div><p>链接到外网需要使用完整的url：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>[displayed text](https://vitepress.dev/reference/runtime-api#usedata)</span></span></code></pre></div><h6 id="简化url" tabindex="-1">简化url <a class="header-anchor" href="#简化url" aria-label="Permalink to &quot;简化url&quot;">​</a></h6><p>由于路径是根据文件生成的，所以路径会带有<code>.html</code>，修改配置可以去掉。<strong>同时，要使其正常工作，服务器必须能够在</strong>不重定向的情况下<strong>访问 <code>/foo</code> 时提供 <code>/foo.html</code>。</strong></p><p>使用GitHub Pages 是默认支持的。</p><p>配置：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>cleanUrls: true</span></span></code></pre></div><h4 id="部署" tabindex="-1">部署 <a class="header-anchor" href="#部署" aria-label="Permalink to &quot;部署&quot;">​</a></h4><h6 id="本地测试与构建" tabindex="-1">本地测试与构建 <a class="header-anchor" href="#本地测试与构建" aria-label="Permalink to &quot;本地测试与构建&quot;">​</a></h6><p>构建文档：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>npm run docs:build</span></span></code></pre></div><p>构建文档后，在本地预览它：启动一个本地静态 Web 服务 ，该服务以 <code>.vitepress/dist</code> 作为源文件</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>npm run docs:preview</span></span></code></pre></div><p>配置端口：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>{</span></span>
<span class="line"><span>  &quot;scripts&quot;: {</span></span>
<span class="line"><span>    &quot;docs:preview&quot;: &quot;vitepress preview docs --port 8080&quot;</span></span>
<span class="line"><span>  }</span></span>
<span class="line"><span>}</span></span></code></pre></div><h6 id="设定-public-根目录" tabindex="-1">设定 public 根目录 <a class="header-anchor" href="#设定-public-根目录" aria-label="Permalink to &quot;设定 public 根目录&quot;">​</a></h6><p>默认情况下，我们假设站点将部署在域名 (<code>/</code>) 的根路径上。</p><p>如果你使用的是 Github（或 GitLab）页面并部署到 <code>user.github.io/repo/</code>，请将 <code>base</code> 设置为 <code>/repo/</code>。</p><h6 id="github-pages部署" tabindex="-1">GitHub Pages部署 <a class="header-anchor" href="#github-pages部署" aria-label="Permalink to &quot;GitHub Pages部署&quot;">​</a></h6><p>1.在项目的 <code>.github/workflows</code> 目录中创建一个名为 <code>deploy.yml</code> 的文件，其中包含这样的内容：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span># 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程</span></span>
<span class="line"><span>#</span></span>
<span class="line"><span>name: Deploy VitePress site to Pages</span></span>
<span class="line"><span></span></span>
<span class="line"><span>on:</span></span>
<span class="line"><span>  # 在针对 `main` 分支的推送上运行。如果你</span></span>
<span class="line"><span>  # 使用 `master` 分支作为默认分支，请将其更改为 `master`</span></span>
<span class="line"><span>  push:</span></span>
<span class="line"><span>    branches: [main]</span></span>
<span class="line"><span></span></span>
<span class="line"><span>  # 允许你从 Actions 选项卡手动运行此工作流程</span></span>
<span class="line"><span>  workflow_dispatch:</span></span>
<span class="line"><span></span></span>
<span class="line"><span># 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages</span></span>
<span class="line"><span>permissions:</span></span>
<span class="line"><span>  contents: read</span></span>
<span class="line"><span>  pages: write</span></span>
<span class="line"><span>  id-token: write</span></span>
<span class="line"><span></span></span>
<span class="line"><span># 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列</span></span>
<span class="line"><span># 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成</span></span>
<span class="line"><span>concurrency:</span></span>
<span class="line"><span>  group: pages</span></span>
<span class="line"><span>  cancel-in-progress: false</span></span>
<span class="line"><span></span></span>
<span class="line"><span>jobs:</span></span>
<span class="line"><span>  # 构建工作</span></span>
<span class="line"><span>  build:</span></span>
<span class="line"><span>    runs-on: ubuntu-latest</span></span>
<span class="line"><span>    steps:</span></span>
<span class="line"><span>      - name: Checkout</span></span>
<span class="line"><span>        uses: actions/checkout@v4</span></span>
<span class="line"><span>        with:</span></span>
<span class="line"><span>          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要</span></span>
<span class="line"><span>      # - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释</span></span>
<span class="line"><span>      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释</span></span>
<span class="line"><span>      - name: Setup Node</span></span>
<span class="line"><span>        uses: actions/setup-node@v4</span></span>
<span class="line"><span>        with:</span></span>
<span class="line"><span>          node-version: 20</span></span>
<span class="line"><span>          cache: npm # 或 pnpm / yarn</span></span>
<span class="line"><span>      - name: Setup Pages</span></span>
<span class="line"><span>        uses: actions/configure-pages@v4</span></span>
<span class="line"><span>      - name: Install dependencies</span></span>
<span class="line"><span>        run: npm ci # 或 pnpm install / yarn install / bun install</span></span>
<span class="line"><span>      - name: Build with VitePress</span></span>
<span class="line"><span>        run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build</span></span>
<span class="line"><span>      - name: Upload artifact</span></span>
<span class="line"><span>        uses: actions/upload-pages-artifact@v3</span></span>
<span class="line"><span>        with:</span></span>
<span class="line"><span>          path: docs/.vitepress/dist</span></span>
<span class="line"><span></span></span>
<span class="line"><span>  # 部署工作</span></span>
<span class="line"><span>  deploy:</span></span>
<span class="line"><span>    environment:</span></span>
<span class="line"><span>      name: github-pages</span></span>
<span class="line"><span>      url: ${{ steps.deployment.outputs.page_url }}</span></span>
<span class="line"><span>    needs: build</span></span>
<span class="line"><span>    runs-on: ubuntu-latest</span></span>
<span class="line"><span>    name: Deploy</span></span>
<span class="line"><span>    steps:</span></span>
<span class="line"><span>      - name: Deploy to GitHub Pages</span></span>
<span class="line"><span>        id: deployment</span></span>
<span class="line"><span>        uses: actions/deploy-pages@v4</span></span></code></pre></div><p>2.在存储库设置中的“Pages”菜单项下，选择“Build and deployment &gt; Source &gt; GitHub Actions”。</p><p>3.将更改推送到 <code>main</code> 分支并等待 GitHub Action 工作流完成。你应该看到站点部署到 <code>https://&lt;username&gt;.github.io/[repository]/</code> 或 <code>https://&lt;custom-domain&gt;/</code>，这取决于你的设置。你的站点将在每次推送到 <code>main</code> 分支时自动部署。</p></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-b88cabfa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-b88cabfa><span class="visually-hidden" id="doc-footer-aria-label" data-v-b88cabfa>Pager</span><div class="pager" data-v-b88cabfa><a class="VPLink link pager-link prev" href="/MyBlog/api-examples" data-v-b88cabfa><!--[--><span class="desc" data-v-b88cabfa>Previous page</span><span class="title" data-v-b88cabfa>Runtime API Examples</span><!--]--></a></div><div class="pager" data-v-b88cabfa><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"index.md\":\"VKzLJYCK\",\"api-examples.md\":\"BxJu5AjK\",\"vitepress.md\":\"wP93Pe9t\",\"markdown-examples.md\":\"MYSJfc4y\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Study Road\",\"description\":\"records of my study\",\"base\":\"/MyBlog/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Examples\",\"link\":\"/markdown-examples\"}],\"sidebar\":[{\"text\":\"Examples\",\"items\":[{\"text\":\"Markdown Examples\",\"link\":\"/markdown-examples\"},{\"text\":\"Runtime API Examples\",\"link\":\"/api-examples\"},{\"text\":\"VitePress\",\"link\":\"/VitePress\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/vuejs/vitepress\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
    
  </body>
</html>